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Sgfiaay 坊 


ここ で 「 ? 」 と いう 感じ の 


人 は 、 「 火 曜日 ] STEP1 を も 
う 一 度 読 ん で くだ さい ね 。 


アナ ログ 回 線 と 

デジ タル 回 線 
一 般 電 話 回 線 を 「 ア ナ ロ グ 
回 線 ]」 と 呼ぶ の に 対し 、 
ISDN (統合 サー ビス デジ タ 
ル 通 信 網 ) を 「 デ ジタル 回 
線 ]」 と いい ます 。 ISDN は 、 
音声 や ファ クス は も ちろ ん 、 
デー タ な どの 情報 を デジ タ 
ル デ ー タ で 送る こと が で き 
ます 。 ま た 、 ア ナ ロ グ 回 線 
より ゃ 高速 な の も 魅力 で す 。 
その た め 、 ホ ー ム ペー ジ の 
表示 や 、 メ ー ル で の 画像 の 
送受 信 な ど を 短 時 間 で で き 
る と いっ た メリ ッ ト が あり 
ます 。 ま た 、 特 定 の 相手 と 
常時 接続 し た 状態 で 利用 で 
きる 「 専 用 回 線 ] と いう も 
の も あり ます 。 専用 回 線 の 
多く は デジ タル 回 線 で 接続 
され 、 通常 の ISDN 回 線 な ど 
の 公衆 回 線 に 比べ れ ば 混雑 
も な い の で 、 通 信 速 度 も 速 
いで す 。 


D) ホー ムペ ー ジ 作成 の 
ジ 大 原則 


> ホ ー ム ペー ジ は モニ タ で 見 る も の ! 

印刷 物 は 最後 は 紙 で す が 、 ホ ー ム ペー ジ は モニ タ に 表示 させ て 見 る る の で す よ 
ね 。 で すか ら 、 カ ラー モー ド 、 最後 の 出力 形式 な ど は 、 紙 を 目的 と し た 画像 作成 
と は いろ いろ と 異な る 部 分 も あり ます 。 ま ず 、 ホ ー ム ペー ジ 用 の 画像 は 、 必ず 次 の 
3 つの 状態 で 作成 し て くだ さい 。 


(1) カラ ー モ ー ド は RGB に する ! 
(@) 解像度 は 7 ら ppi で 作る ! 
(3③) 画像 の 単位 は ビク セル ! 


「 な ん で こう する の ?」 と 聞か れれ ば 、 答 え は 簡単 。 | モニ タ が そう だ か ら !」 で 
す 。「 色 、 画 質 、 サ イズ ] を すべ て モニ タ の 基準 に 合わ せる と 、 こ うな る わけ で す 。 


@ ゅ p サ イズ ダウ ン を 追求 する ! 

ホー ムペ ー ジ は 、 一 般 的 に は 電話 回 線 な ど を 通し て デー タ の や り 取 り を 行い ま 
す 。 ISDN や 専用 回 線 な どの 高速 の デジ タル 回 線 を 利用 し て いる 人 だ け で な く 、 実 
隊 に は アナ ログ 回 線 を 使っ て いる 人 も た くさ ん いる わけ で すか ら 、 そ うし た 人 に も 
親切 な よう に 、 作 っ て あげ た いで す よ ね 。 

ネッ ト サ ー フ ィ ン し て いる と 、 ト ッ プ 画面 が 現れ る まで すご く 時 間 の か か る ペー 
ジ が あり ます 。「 い い 加 減 に し て 一 ! 」 と いう 思い で 待っ て いる と 、「 ど ー し て こん 
な 画像 で こん な に 時 間 が か か る の 一 ? ! | と いう 絵 が 出 て きた り し ます 。 

原因 は 、 必 要 以 上 に 大 き な 画 像 だ っ た り 、 フ ァイル サイ ズ に まっ た く < 注意 が 払わ れ 
て いな か っ た りす る せい で す 。 プ ロ の ホー ムペ ー ジ 制作 者 は 、 デ ー タ サイ ズ を いか 
に 小さ くす る か に 命 を か け て いま す 。 ホー ムペ ー ジ を 開設 し て 早々 「 こ の ペー ジ は 
遅い ] と いう 印象 を 与え て し まう と 、 再 訪 者 は まず いま せん 。 商品 価値 が な く な る わ 
け で す 。 そう な る と 、 制 作者 ・ 制 作 会 社 に と っ て は 死活 問題 。 デー タ サ イズ を 小さ < 
し て 、 か つ 内 容 の 充実 し た デザ イン の いい も の が 求め られ る の で す 。 
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ホー ムペ ー ジ 作成 の 大 原 昌 


bk ファ イル 形式 、 色 数 な ど を 異な る 設 人 
定 に し た 画像 を 、3 種 類 ま で シミ ュ レ ー 
ショ ン し て 、 最 適 な 画像 に 変換 で きま | 
す 。Photoshop の [Veb 用 に 保存 ] コ | 
マン ド で も 同様 に 設定 で きま す 。 


1 瑞 HOME PAGE-01 - Microsoft It 
1 


り 疹 ] CINDOWS\ デ スト 2 7.Sunday\step5 完 成 \HOME-PAGE-01.html 


NEW AGE 


白い スペ ー ス を 透明 GIF と し て 最小 
限 の デー タ サ イズ で 管理 で きま す 。 


全 4 つ の 静止 画像 を 連続 し て 
表示 し 、 蝶 が 羽 を 動か し て い 
る よう に 見 せる こと が で きま 
kr: 


トー た ミネ ま まま = 


し が た 半 人生 : 


中 呈 生生 皇 琴 


(c) Yukari Yoshioka / NEW AGE Co.Ltd 1999 


全 マ ウス を 重ね る と 、 そ れ に 
反応 し て 別 の 絵 が 表示 され る 
よう に 設定 で きま す 。 


LESg 


ImageReady を 使え ば 、 こ ん な ホー ムペ ー ジ を 作る こと が で きま す 。 


クリ ッ ク す る と 、IHINFORMATION] ペー ジヘ へ 
ジャ ンプ する よう に で きま す 
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ーーーーーーーーーーーーー ニ ー ーーーーーーー ニ ーーーー ツ ーーーーーーーーーーーーーー 


クリ ッ ク し て Photoshop と 
ImageReady を 切り 替え る 


eyImnageReacdly と は 

Adobe ImageReady は 、Web 画 像 を 作り 出す た め の 専 用 ソフ ト で す 。Web に 適 
し た 画像 に 変換 する 機能 が 大 変 す ぐれ て いて 、 フ ァイル 形式 や 色 表 な ど に 基づい 
て 変換 で きる こと は も ちろ ん 、 フ ァイル サイ ズ を 基準 に 変換 する と いっ た 便利 な 変 
換 機能 を 備え を て いま す 。 そ の ほか 、 ク リッ クボ タン や GIF アニ メー ショ ン の 設定 も 
可能 で す 。Photoshop 同 様 の ペイ ント 機能 や 色 補 正 機能 も 備え てい ます が 、 
Photoshop と 切り 替え て 使う こと が で きま すか ら 、 通 常 の 画像 処理 は Photoshop で 
行い 、Web に 特 化し た 機能 を 使う と き は ImageReady に 切り 替え て 作業 すれ ば 、 効 
率 的 に 進め られ る で し ょ う 。 も ちろ ん 、 フ ァイル は Photoshop と 完全 互換 で す 。 

実際 の 作業 は STEP2 か ら 行 いま す 。 こ こ で は 概略 を 把握 し まし ょ う 。 


GALLERY-over 
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HINK-over 
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これ は Photoshop の 画面 で す 。 ツー ルポ ツ ックス の 一 番 下 に 用 意 さ れ て いる ボタ ン で 、 ImageReady に 切り 替え る こ 筑 

が で きま す 。 ImageReady は 、Photoshop 形 式 (PSD) の ファ イル を 、 レ イヤ ー 情 報 な ど を 保つ た まま 開く こと が で 
きま す 。 そ し て 、 ImageReady で 画像 スラ イス 、 ロ ー ル オー バー 効果 、GIF ア ニメーション な ど を 設定 し て PSsD 形 式 で 保存 
し 、 再 度 Photoshop で 開く こと が で きま す 。 
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ウ ImageReady に 切り 替え る ボタ ン を クリ ッ ク す る と 、 4 図 1 の よう に ファ イル を 開い た 状態 で ImageReady に 
ImageReady が 起動 し ます 。 切り 替え る と 、Photoshop フ ァイル を ImageReady 
ファ イル に 変換 する バー が 現れ ます 。|ImageReady は 
Photoshop フ ァイル と 完全 に 互換 性 が ある の で 、 自 由 に 

Photoshop と の 行き 来 が で きま す 。 


アプ リケーション の 
見 分 け 方 


Photoshop と ImageReady 
と は 、 細 か い 部 分 で は 違い 
が ある の で す が 、 慣 れ な い 
と わか ら な いく らい よく 似 
て いま す よ ね 。 最初 は ツー 
ル ボ ックス の 一 番 上 の 絵柄 
で 区 別 す る と いい で し ょ う 。 


まま 3 1 癌 MI 


に 大 在 


anim-003 


anim-004 


人 る 左 が ImageHeady の 、 
右 が Photoshop の ツー ル 
ボッ クス 。 


大 き A 幅 
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これ は ImageReady の 画面 で す 。 図 1 と 見 比べ て くだ さい 。 ど こ が 違 うか わか り ま す 
か ? ほとん ど 同 じ よ うな 環境 で 作業 で きる の で す 。 Photoshop に 戻す と き は 、 ツ ー 
ル ボ ックス の 一 番 下 の 切り 替え ボタ ン を も う 一 度 ク リッ ク し ます 。 
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| ImageReady で ホー ムペ ー ジ を 作ろ う | ル 「 「 「 


@ ゅ 切り 替え る 際 の 注意 
Photoshop と ImageReady を 切り 替え な が ら 作 業 す る 場合 は 、 切 り 替 える 前 に 必 
ず 保 存 を 行っ て くだ さい 。 保存 せ ず に 切り 替え る と 、 ア ラー ト が 現れ ます 。 


1 Photoshop で 作業 中 に ImageReady に 切り 替え る と 、 2 ImageReady で 変更 を 加え た 後 、Photoshop に 切り 

「imageReady フ ァイル に 変換 する 前 に 保存 し て くだ 替え て 作業 を 続け よう と する と 、「Photoshop フ ァ イ 
さい 」 と いう 内 容 の アラ ー ト が 出 て きま す 。 [保存 ] ボタ ル に 変換 する 前 に 保存 し ます か ?」 と アラ ー ト が 現れ ます 
ン を クリ ッ ク し て 保存 操作 を 行い ます 。 の で 、[ 保 存 ] ボタ ン を クリ ッ ク し ます 。 


@ ぁ 分 割 画面 で 最適 化す る 
ImnageReady で は 、 ウ ィ ン ド ウ を 最高 4 画面 に 分 割 し て 、 そ れ ぞ れ に 最適 化 を 実 
行 で きま す 。 最 適 化 は 全体 に 対し て で な く 、 ス ライ ス 単 位 で も 設定 で きま す 。 そ 
どちら も 、Web で 最も 広く 


使わ れ て いる ファ イル 形式 の 設定 は [最適 化 ] パレ ッ ト で 行い ます が 、「 フ ァイル 形式 ] は GIF また は JPEG に 
で す 。 連続 階 調 の ある 写真 、 、 EE 

は JPEG、 文 字 や 簡単 な イ する の が 一 般 的 で す 。 GIF で の 色 数 は 、 最適 化 実 行 後 の プ レビ ュー で 画質 と ファ イ 
ラス ト な ど 単 色 の 多い グラ Bee sy aa 本 

和 な 50SIE ni ル サ イ ズ を 見 比べ な が ら 、 許 せる 範囲 で 決め て くだ さい 。 

fe トコ (1) じ ア ッ プ ] [4 アッ プ ] の ど ち 

式 を 使い 分 け て 、 よ りき れ ツ ヒン 

を 小さ くす る の で す 。 


画像 を 分 割 す る こと 、 ま た は 分 
割 さ れ た 個々 の エリ ア を いい ま 


GIF 形式 に 変換 し た 場合 、 
Sc | 「[ カ ラー テー ブル ] で 使用 
ニー する 色 を 確認 で きる 


⑬) [最適 化 ] パレ ッ ト で ファ 
イル 形式 な ど を 設定 する 


Y 


(4) 設定 に 合わ せ て 画像 が 空 損 
され 、 プ レビ ュー され る 


(2) [スラ イス ] ツー ル で 
変更 し た い ス ライ ス を 選 
択 


(5) 最適 化 の 設定 内 容 、 
転送 速度 は ここ 


216 一 週間 で マス ター する [日 曜日 ] 


' STEP 1 ホー ムペ ー ジ 作成 の 大 原則 


> 色 の 選び 方 

ImageReady は Web 用 の 画像 を 作成 する こと を 前 所 と し て いま す の で 、 色 の 管理 
も HTML で 使用 され て いる 16 進 数 で 行い ます 。[ カ ラー] パレ ッ ト の 表示 も 16 進 数 
で す 。Web セ ー フ カラ ー と 呼ば れる 、Macintosh と Windows に 共通 する 216 色 の パ 
レッ ト は 、 数 字 が 00、33、66、99、CC、FF の 色 の 組み 合わ せ で す 。 


Web セ ー フ カラ ー 以 外 の 色 
を 選ぶ と 、 警 告 の マー ク が 
表示 され ます 。 こ の マー ク 
を クリ ッ ク す る と 、Web セ 
ー フ カラ ー の 範囲 内 で 近い 
色 を 選び 直し て くれ ます 。 


1 全 を ドラ ッ グ する と 、 各色 が 16 進 数 で 表示 され ます 。 2 Ctrl キー を 押し な が ら 合 を ドラ ッ グ する と 、 区 切り 線 
通常 は 人 る が スラ イダ の 区 切り 線 に スナ ッ プ する の で 、 以外 に 配置 で き 、Web セ ー フ カラ ー 以 外 の 自由 な 色 


Web セ ー フ カラ ー が 選ば れ ま す 。 を 選ぶ こと が で きま す 。 


オブ ショ ン を 了 す 


wm ビン ド ト !! 


四 Web セ ー フ カラ ー 四 


各色 の 00、33、66、99、CC、FF (RGB の 数 値 で 言う と 0、51、 
102、 153、204、255) の 6 種類 と RGB3 色 の 組み 合わ せ は 、6 の 3 
乗 で 216 色 と な り ま す 。 こ れ を Web セ ー フ カラ ー と 呼ん で いま す 。 
ペー ジ を 見 る 人 の 環境 が Macintosh で も Windows 以 外 で も 、 モ ニ 
ーー - ー ク タ に 表示 可能 な 色 数 な ど が 違っ て も 、 同 じ よ うに 見 せ た い と いう 
う パレ ッ ト の メニ ュー の [Web セー フカ ラー の ラン ブ 場合 は 、 Web セ ー フ カラ ー を 使う こと を お すす めし ます 。 
を 作成 ] に チェ ッ ク す る と 、 カ ラー ピッ カー が Web 
セー フカ ラー に 限ら れ ま す 。 


4 情報 パレ ッ ト で も 色 が 確認 で きま す 。16e 進 数 で は 6 桁 で 表示 され ます が 、R、G、B そ 

れ ぞ れ 2 桁 ずつ の 数 値 で す 。 つ まり 0985F1 は 、R : 09、G : 85、B : F1 で す 。 こ れ は 
Web セ ー フ カラ ー の 組み 合わ せ で は な い の で 、 ペ ー ジ を 見 る 側 の 環境 に よっ て 色 が 多少 変 
わっ て し まい ます 。 
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MR ジ を 作ろ う | 


ee - mn 


ーー mwy、 ホ ー ム ペー ジ 用 の 
Siigay 電 9 画像 を 作る 


ホー ムペ ー ジ 用 の フォ ー マ ッ ト は 、Photoshop で 作成 し た も の が CD-ROM に 用 
意 き れ て いま す 。 こ の ステ ッ プ で 手順 を 説明 し ます の で 、 余 裕 の ある 人 は フォ ー マ 
ッ ト を 最初 か ら 作 っ て み ま し ょ う 。 余裕 の な い 人 は この STEP を 飛ば し 、 STEP3 か 
ら 練 習 を 始め て くだ さい 。 


(1) ピク セル 単位 に 切り 替え る 
単位 を 、 ホ ー ム ペー ジ の 基本 単位 で ある ピク セル に し ます 。 

(6) アニ メー ショ ン に 必要 な 画像 を 作る 
蝶 が 羽ばたく 様子 す ア ニメーション に し ます の で 、 羽 の 状態 の 違う 4 つの 画像 を 作 
り ます 。 

(3) ボタ ン が 反応 する と き の 画 像 を 準備 する 
マウ ス が ボタ ン に 重なっ た と き に 反応 する よう に し ます の で 、 そ の 変化 を 加え た 画 
像 を 作り ます 。 


ここ が ポイ ント 


ホー ムペ ー ジ は ピク セル 単位 で 

ホー ムペ ー ジ は モニ タ で 見 る も の で す よ ね 。 だ か ら 、 モ ニタ の 単位 
で ある pixel を 単位 に し て お きま す 。 「 ボ タン は 幅 50 ピ クセ ル く らい 
で 作っ て ね 」 な ん て 言わ れ た と き に 、 だ いた いこ れ く らい の サイ ズ 
か な と 想像 で きる よう に 、 ビ ピク セル と いう 単位 に も 慣れ て お く こ と 
が 必要 で す 。 


閉 牙 ⑲ 
保存 当 
dfR(6 
dddkxD390 
2 


で ポス トメ クリ ゴト | に Ha わせ (72 amd の 
て 人 96 定 区 き わせ る (7227 ponnci2D) 


1 [ファ イル ] メニ ュー [環境 設定 ] 一 [日 位 ・ 定 規 ] 2 ダイ アロ グ ボ ックス の [単位 ・ 定 規 ] 設 
を 選び ます 。 定 画面 が 開き ます 。 [定規 ] の [単位 ] を [pixels] 
に 切り 替え て [OK] ボタ ン を クリ ッ ク し ます 。 
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画像 の 六 き さき 1.06M ーー ーー ーー 


則 
交 像 度 (BE: 了 pixels/inch 回 
画像 モー | RGB カラ ー 較 | 


| 0 示 内 容 


BHTifE 


用 柳 請 定 結 7 
Z) 


[ファ イル ] PC ー 
5 ューー [新規 ] 回 


(Ctrl キー 十 N) を 選び ん が 、 こ こ 
ます 。 し まし た 。 


(3) 輪郭 を 描く 


ukistiEfHNtiSrtdkniiiynsliin 


績 | 


io: 


真ん中 に ガイ ドラ イン を 引き ます 。 新規 レ イヤ ー を 作成 し て 、 

[ 椿 円 形 選択 ] ツー ル で Shift キ ー を 押し な が ら 正 円 を 描き ま す 。 
[編集 ] メニ ュー [時 界 線 を 描く ] を 選択 し 、【 幅 ] を 16 ビ クセ ル に 
指定 し て 輪郭 線 を 作成 し ます 。 この レイ ヤー に は 「 大 き な 円 」 と いう 
名 前 を 付け ます 。 


ST 世 P 


Ni] 
キャ ン セ ル | 


画像 の 大 き さ を 図 の よう に 設定 し ます 。 [ファイ 
ル 名 ] を 付け る の は 最後 の 保存 時 で も か まい ませ 
で は 最初 の うち に 、「HOME PAGE-01」 と 


ホー ムペ ー ジ 用 の 画像 を 作る 


ここ が ポイ ント 


幅 は 500 一 B00 ピ クセ ル 
新規 で 作成 する 峠 が 、 ホー ムペ ー ジ の 


幅 に な り ます 。 特に 決ま り は あり ませ 
ん が 、500…600 ピ クセ ル に する の が 
一 般 的 で す 。 


560pixels 


660pixels 


5 指定 し た サイ ズ で 新 し い フ 
ァイル が 開き ます 。 


Z 召 の デー タ は 7 WP フォ ル ダ の 
「 蝶 .psd」 を 開き 、 ド ラッ グ & ドロ ッ プ で 
「HOME PAGE-01.psd」 ウィ ンド ウ へ 取り 込み 
ます 。 
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| ImageReady で ホー ムペ ー ジ を 作る ろう | 


1 


ESGEEERGSSWESsi 


断 規 レイ ヤー] アイ コン へ | NI 
ドラ ッ グ ) 


M | 


ED3 CSC CS に 35 GS 


円 の 中 央 に 収まる よう に 蝶 を これ か ら 、 ア ニメーション 用 の 10 複製 し た 蝶 の レイ ヤー を 選択 
配置 し 、[anim-004] と レイ ヤ 画像 を 作成 し ます 。 蝶 の レイ し 、Ctrl キ ー+T ([ 変 形 ] コマ 

一 名 を 変え ます 。 ヤー を [新規 レイ ヤー] アイ コン に ンド の ショ ー ト カッ ト で す ! ) を 押 
ドラ ッ グ し て 複製 し ます 。 し て 、 ハ ンド ル を Alt キ ー 二 ドラッグ 


し て 中 心 を 基準 に 幅 を 狭く し ます 。 


anim-001 


ーー |3nim-HH2 


anim-U03 


11 同様 の 手順 で 、 蝶 が 羽 を 12 〔 補 字 ] ツー ル を 使っ て 図 の よう に 文字 を 入力 し ます ([NEW AGE] レイ ヤー 

だ ん だ ん 閉じ て いく よう と [INFORMATION] レイ ヤー が で きま す )。 [INFORMATION] レイ ヤー を 選 
に 、 幅 の 狭い 画像 を 別々 の レイ 択 し て 、[ レ イヤ ー] メニ ュー 一 [文字 ] 一 [レイ ヤー を ラス タラ イズ ] を 選択 し ま 
ヤー で 作っ て お きま す 。 こ の 4 す 。 


段階 の 蝶 を 連続 し て 表示 する こ 
と で 、 羽 を バタ バタ し て いる よ 
うに 見 せる の で す 。 
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ほか し を か ける 


1 「INFORMATION」 の 項目 を 選択 し 、 [フィ 

ル タ ] メニ ューー [ぼかし ] 一 [ぼかし (移動 )] で 、 
[角度 : 0]、[ 嘘 離 : 5] 程度 に ぼかし ます 。 同様 に し て そ 
の 下 に 「WORKS」「GALLERY」「LINK」 の 文字 を 入力 し 、 
同様 に 加工 し ます 。 


15 「 ロ ー ル オー バー」 と いう 機能 を 使っ て 、 マ ウス が 重 
な っ た と き に 絵 が 変わ ちゃ よう に し ます の で 、 反 応 し た 
と き ぎの 画像 を 同じ 位置 に 作成 し ます 。 マ ウス を 重ね た と き 
に シャ ー プ な 文字 に 変わ る ゃ よう に 、4 つ の 項目 ボタ ン に 対 
し て 画像 を 別 レ イヤ ー に 作成 し ます 。 


ST 世 P 2 


ホー ムペ ー ジ 用 の 画像 を 作る 


條 時  」 
| 還 に に J 
1 了 これ で トッ プ 画 面 の 最初 の 状態 が で きま し た 。 和 加 項 

目 は [INFORMATION] [WORKS] [GALLERY] 
[LINK] と いう 4 つの レイ ヤー に 分 か れ て いま す 。 


1 融 INFORMATION 
INFO (2 TION 6 Pr 
市 悦 | に:ns 
W 3 請 旧 Re 
央 届 | に leuemy 
員 間 9M 
族 司 に:moe 


16 それ ぞ れ の 項目 に 対す る 反応 し た と き の 画 像 は 
[INFO-over] [WORKS-over] [GALLERY-over] 
[LINK-over] と いう 別 レ イヤ ー に し ます 。 目 の ア イコ ン を 
クリ ッ ク す る こと で 、 表 示 ・ 非 表示 の 切り 替え が で きま 
す 。 こ こ で は 図 14 で 作成 し た 4 つの レイ ヤー を 非 表 示 に し 
て 、 反 応 する 画像 の レイ ヤー だ け を 表示 し て いま す 。 こ れ 
で 完成 で す 。 


[日 曜日 ] 
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し Wi6EHNN ペ コジ を 作ろ う 回 


mm ゃ = 5 "パニ キー キン ー の ey 


"mrimwrfymrrmrmrmtfiaramrmneceeanenyacnzammmondiemmnvmmaahecorraerasDrmavstetPhYRenwEnerenforrfPHRT 


に 7th DAY ! ST_a に 1/ (@ 9) 4 ラ イ ス の 作成 


Se 
GIF アニ メー ショ ン に し た り 、 ボ タン に 利用 する こと を 考え て 、 ス ライ ス 機 能 を 
使っ て 画像 を 分 割 し て お きま し ょ う 。 


(1) ホー ムペ ー ジ 用 の 画像 を 開く 
Photoshop で 作成 し た 画像 を 開き ます 。 


(@ つ ) ガイ ドラ イン を 引く 
画像 を 分 割 す る た め の ガ イド ライ ン を 引い て お きま す 。 


(3) [スラ イス ] ツー ル で スラ イス を 作る 
[スラ イス ] ツー ル を 使っ て 、 ガ イド ライ ン に 合わ せ て スラ イス を 作り ます 。 


(4) 選択 範囲 か ら ス ライ ス を 作る 
GIF アニ メー ショ ン 用 に 、 蝶 の 部 分 を 選択 し て スラ イス に 変換 し ます 。 


(5) スラ イス の サイ ズ を 調整 する 
スラ イス の サイ ズ を 往 調 整 し ます 。 


ホー ムペ ー ジ 用 の 画像 を 開く 
STEP2 で 作成 し た 画像 を ImageReady で 開い て くだ さい 。 こ こ か ら 新 規 に 始め る 
人 は 、CD-ROM に 用 意 し て ある ファ イル を 開い て くだ さい 。 


レイ ヤー の 選択 は 
不要 


これ か ら ス ライ ス (画面 を 
分 割 する 作業 ) を 行い ます 
が 、 画面 に 対し て 行い ます 1 ImageReady を 起動 し 、[ フ 

ァイル ] メニ ュー [開く ] 
で 、「7_Sunday」 フォ ル ダ の 中 の 
「step2 完 成 】」 フォルダ に ある 
「HOME PAGE-01.psd]」 ファ イル 
を 開き ます 。STEP2 で Photoshop 
で 「HOME PAGE-01」 を 作成 し 
た 人 は 、Photoshop の ツー ル ボ ッ 
クス で ImageReady に 切り 替え て 
くだ さい 。 


の で 、 ど の レイ ヤー が 選ば 
れ て いて も か まい ませ ん 。 レ 
イヤ ー が 関係 し て くる の は 、 
STEP4 で 説明 する ロー ルオ 
ー バ ー の 設定 や 、STEP5 で 
説明 する GIF アニ メー ショ ン 
の 設定 の と きだ け で す 。 
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STEP3 


Photoshop で 作成 し た ファ イル が 開き ます 。 も し 分 1 [ビュ ー] メ 
割 画 面 に な っ て いる よう な ら 、[ 元 画像 ] タブ を クリ を 選び ます 。 
ッ ク し て くだ さい 。 


1 


ニュ ーー [定規 を 表示 ] (Ctrl キー 十 R) 


[スラ イス ] ツー ル 


0 テ ド や 


六 「NEW AGE」 の 文字 の 上 下 と 、 中 5 さら に 、4 つ の 項目 に 対し て も 、 ツー ル ボ ックス か ら 
央 の 円 の 四方 に ガイ ドラ イン を 作 の よう に ガイ ドラ イン を 作成 し ま [スラ イス ] ツー ル を 
成 し ま す 。 す 。 選び ます 。 
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/ ドラ ッ グ 


「 ミネ ミミ す ゃ : ま 


ア 「NEW AGE」 と いう タイ トル 部 分 を 、 ガ イド に 合 同じ く 、 円 の 周囲 の ガイ ドラ イン に 合わ せ て 、[ ス ラ 
せ て ドラ ッ グ し て 囲み ます 。 イス ] ツー ル で ドラ ッ グ し ます 。 


下 の 4 つ の 文字 も 、 ガ イ ドラ イン に 合わ せ て ドラ ッ グ 10 ガイ ドラ イン は も う 使 いま せん の で 、[ ビ ュー] メニ 
し て くだ さい 。 こ れ で 基本 的 な スラ イス は 完了 し まし ューー [ガイ ド を 隠す ] (Ctrl キー : ) で 、 非 表示 
た 。 この 蝶 の 部 分 を STEP5 で GIF アニ メー ショ ン に し ます 。 に し て お きま し ょ う 。 
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STP 3 スラ イス の 作成 


ぐ ぁ 選択 答 囲 を スラ イス に する 
今度 は 、GIF ア ニメーション に する た め に 、 蝶 の 部 分 だ け を 選択 し て か ら 、 そ の 
選択 節 囲 を スラ イス に し まし ょ う 。 


ここ が ポイ ント ! 
画像 を ぎり ぎり に 選択 する 
時 形 選択 ] GIF アニ メー ショ ン は 、 静止 画 に 
ツー ル 9 アー 比べ て 表示 に は 大 量 の メモ リ を 要 


し ます 。 少し で も メモ リ の 人 負担 を 
少な くす る た め に 、 小 さい サイ ズ 
で 作る の が ポイ ント で す 。 で きる 


だ け 無 駄 な 余白 が で き な い よう 
に 、 画 像 を ぎり ぎり に 選択 し ま 
す 。 


1 ツー ル ボ ックス か ら 蝶 だ け を ドラ ッ グ し て 囲み ます 。 な る べく 余白 が で き 
[ 短 形 選択 ] ツー ル な いよ うに 、 ぎ り ぎ り に ドラ ッ グ し て くだ さい 。 
を 選ん で くだ さい 。 


まま も すま まま 1 


し まま すそ ] 


すす ミ さそ すもう: 


う [スラ イス ] メニ ュー 一 [選択 範囲 か ら ス ライ ス を 作 4 選択 し た 蝶 が 新た に スラ イス に 追加 され 、 そ れ 以 降 

成 ] を 選び ます 。 の スラ イス の 番号 が ! 順 送り され ます 。 ス ライ ス の 番号 
が 自動 的 に 更新 され る の で す 。 奈 白 で クリ ッ ク す る か 、 
Ctrl キー 十 D で 選択 を 解除 し て くだ さい 。 
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| ImageReady で ホー ムペ ー ジ を 作ろ う | 
ゅ スラ イス の 大 き さ を 変更 する 
[スラ イス 選択 ] ツー ル を 使っ て 、 さ き ほ ど 作 成 し た スラ イス の 大 き さ を 調整 
て みみ ましょ う 。 


まま 1『 9 ます - 1] 


ーーー 生 ーーーーーーーーーー ーー ニーーー> 


1 ツー ル ボ ックス か ら 「[ ズ スラ イス 選 


2 11 番 の スラ イス を 選択 し ます 。 周 囲 に ハン ドル が 表示 され ます の で 、 一 
択 ] ツー ル を 選び ます 。 


NE WE 末富 | 


まま も ま る また ま 】 


し たる よそ : 


1 高 さ を 縮め る と 上 に 空き が で き ーー ンー し ま 5 円 の スラ イス が 選択 され 、 ハ ン 

て 、 そ の 空き も 分 割 さ れ て し ま し ょ う 。 上 の スラ イス (円 の ス ドル が 表示 され ます 。 下 の ハン 

いま す 。 ス ライ ス の 番号 も 1 つ ず つ 増 ライ ス ) を クリ ッ ク し ます 。 蝶 は 別 ドル を ドラ ッ グ し で 下げ 、 空 き (11 

えて いま す 。 の スラ イス に な っ て いま すか ら 、 蝶 番 の スラ イス ) を な くし まし ょ よう 。 
以外 を クリ ッ ク し て くだ さい 。 スラ イス の 番号 が 元 に 戻り ます 。 
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11 番 の [INFORMATION] の スラ イス と 同じ 高 さ に 7 [スラ イス ] パレ ッ ト を 使い ます の で 、 画面 に 出 て い 


な る よう 、12 番 か ら 14 番 まで の スラ イス の 高 さ を 調 な けれ ば 、[ ウ ィ ン ド ウ ] メニ ューー [スラ イス を 表 
整 し て くだ さい >。 示 ] を 選択 し 、[ ス ライ ス ] パレ ッ ト を 出し ます 。 


sswAlt (オル ト ) 


Alt は 、 ブ ラウ ザ 上 で 画像 が う 
まく 表示 され な か っ た と き に 、 
画像 の 代わ り に 文字 を 表示 す 
る 機能 で す 。 ここ で は 、 蝶 が 
表示 され な いと き に 、 
「animGIF」 と いう 文字 が 表 
示さ れる よう に 設定 し て いま 
す 。 


8 番 の 蝶 の スラ イス を 選択 し て 、[ ス ライ ス ] パレ ッ ト の メ パレ ッ ト に 追加 項目 が 現れ ます 。 [種類 ] は [ 画 


ニュ ー か ら 「[ オ プシ ョ ン を 表示 ] を 選び ます 。 像 ]、[ 名 前 ] に は 自動 的 に ファ イル 名 と スラ イ 


ス 番 号 が 入力 され て いる まま 、[Alt] の 入力 ボッ クス 
に [animGlF] と 入力 し ます 。 
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| ImageReady で ホー ムペ ー ジ を 作ろ う | 


ro ロー ルオ ー バ ー の 設定 
S 滞 indlay 《W と HTML 書 き 出し 


⑯ ゅ ご の ステ ッ プ の 流れ 
スラ イス に よる 画面 の 分 割 作業 が 終わ っ た ら 、 い よい よ ス ライ ス に リン ク 先 や 
ロー ルオ ー バ ー の 設定 を 行い まし ょ う 。 


(1) ボタ ン の 設定 

(2) ロー ルオ ー バ ー の 設定 
(3) 空白 スラ イス の 設定 
(4) 最適 化 保存 

(5) HTML 書 き 出し 


@ ゅ ポタ ン の 設定 

11 番 の [INFORMATION] と いう スラ イス に リン ク 先 の URL を 指定 し て 、 ク リ 
ッ ク す る と リン ク 先 へ ジャ ンプ する よう に 設定 し ます 。12 番 か ら 14 番 の スラ イス 
に 対し て も 同様 の 設定 を 行い ます 。 


クリ ッ ク 


1 ツー ル ボ ックス か ら 「 ス ライ ス 選 択 ] ツー ル を 選び ま り ) [INFORMATION] の 11 番 の スラ イス を クリ ッ ク し て 
す 。 選び ます 。 
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人 MM HI ーー 2 em り )SN 
| や TFP 4 HTML 災 き 出し 


自動 的 に ファ イル 名 と スラ イス 番号 が 入る 


[名 前 ] に は 、 自動 的 に ファ イル 名 と スラ イス 名 が 入力 され ます が 、 


実際 に は 自分 で わか りや すい 名 前 を 入力 し て お く こ と を お すす め 
し ます 。 


INFORMATON 


特別 付録 CD-ROM の 中 の 完成 ファ イル に も 、 適 当 な URL が 記入 し 
て あり ます 。 ク リッ ク す る と イン ター ネッ ト に 接続 し よう と し ま 
ー ea = す の で 、 注 意 し て くだ さい 。 
3 [スラ イス ] タブ を クリ ッ ク し て 、[ ス ライ ス ] パレ ッ 

ト に 切り 替え ます 。 ボタ ン の リン ク 先 を [URL] 欄 に 
入力 し まし ょ う 。 こ こ で は 適当 な URL (http://www. 
yyukari.co.jp/info.html) を 指定 し て いま す 。 画像 が 表示 
され な か っ た と き の た め に 、[AIt] に は [INFORMATION] 
と 入力 し て くだ さい 。 


クリ ッ ク 


HOME PAGE-0112 = EE 


http://wwwuyyukarico.jp/Wwarks.html 


4 [スラ イス 選択 ] ツー ル で 、12 番 の [WORKS] と い 5 ボタ ン の リン ク 先 (架空 の WORKS ペ ー ジ ) を [URI] 
う ス ライ ス を クリ ッ ク し ます 。 欄 に 入力 し ます 。 画像 が 表示 され な か っ た と き の た 
め に 、[AIt] に 「WORKS」 と 入力 し ます 。 


ェ ー 
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クリ ッ ク 


折 前 間 HOME PAGE-01 13 | 
URL (MM /wwwiyyukarico.jp/galleryhtml 首 


[スラ イス 選択 ] ツー ル で 、13 番 の [GALLERY] と い 7 ボタ ン の リン ク 先 (GALLERY ペ ー ジ ) を [URL] 欄 
う ス ライ ス を クリ ッ ク し ます 。 に 入力 し ます 。 画像 が 表示 され な か っ た と き の た め 
に 、[Alt] に [GALLERY] と 入力 し ます 。 


クリ ッ ク 


生前 肖 HOME PAGE-01 14 


Ihttp://www.yyukaricojp/ link.html | 


ボタ ン の リン ク 先 (LINK ペ ー ジ ) を [URL] 欄 に 入 
力 し ます 。 画 像 が 表示 され な か っ た と き の た め に 、 
[Alt] に [LINK] と 入力 し ます 。 


[スラ イス 選択 ] ツー ル で 、14 番 の [LINK] と いう ス 
ライ ス を クリ ッ ク し ます 。 
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ゥ ロー ルオ ー バ パー の 設定 

ボタ ン の 設定 を 行っ た 4 つの スラ イス に 、「 ロ ー ル オー バー」 の 設定 を し て み ま し 
ょ う 。 ロ ー ル オー バー に は 5 種類 の 効果 が 用 意 さ きれ て いま す が 、 こ こ で は 、 マ ウス 
ポイ ンタ が 重なっ た と き 絵 柄 を 切り 替え る よう に 設定 し て み ま し ょ う 。 


クリ ッ ク クリ ッ ク 


1 [ロー ルオ ー バ ー] タブ を クリ ッ ク し て [ロー ルオ ー の [スラ イス 選択 ] ツー ル で 、 ス ライ ス 番 号 11 の 
バー] パレ ッ ト に 切り 替え ます 。 [INFORMATION] を クリ ッ ク し て 選び ます 。 


クリ ッ ク 


[Over] と いう ステ ー ト が 作成 され まし 
ます 。 た 。 こ の ステ ー ト に 、 マ ウス が 重なっ 
た と き の 絵 柄 を 指定 する の で す 。 


う [ロー ルオ ー バ ー] パレ ッ ト の メニ ュー か ら [新規 ステ ー ト ] を 選び 4 


ーー 較 還 に ] レイ ヤー の 選択 は 
(1) クリ ッ ク し て 非 表 示 に ( INFORMATON 作 不要 で す 


(2) クリ ッ ク し て 表示 ( INFO-ovar | ここ で は 見 や すい よう に レイ ヤー 
| を 選択 し て いま す が 、 ロ ー ル オー 
バー の 設定 で は 、 特に レイ ヤー を 


WORKS-over 選択 し て お く 必 要 は あり ませ ん 。 


5 [Over] と いう ステ ー ト が 選択 され て いる 状態 で 、[ レ イヤ ー] バレ ッ ト の [INFORMATION] レイ ヤー を 非 表 示 に し 、 
[INFO-over] を 表示 に し ます 。 表示 と 非 表 示 の 切り 替え は 、 目 の アイ コン を クリ ッ ク 、 で し た よね 。 
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5 通常 ] の レイ ヤー の 状態 [Over] の レイ ヤー の 状態 


WORKS-over 


マウ ス が オー バー し た と き に 、[INFO-over] レイ ヤ 7 この 画面 が 、 マ ウス ポイ ンタ が [INFORMATION] に 
ー が 表示 され る 設定 に な り ま し た 。[ ロ ー ル オー バー] 重なっ た と き (オー バー し た と き ) の 状態 で す 。 
パレ ッ ト で 確認 する と 、[ 通 常 ] に [INFORMATION] レ 
イヤ ー、[Over] に [INFO-over] レイ ヤー が 表示 され て 
いま す 。 


(1) クリ ッ ク 


を 所 。。 クリ ッ ク し て 非 示 に 


クリ ッ ク し て 表示 


ョ sl 人 220SDC2St2G2RSRSSS 

スラ イス 番号 12 の [VVORKS] を クリ ッ ク し て 選び 、 [Over] と いう ステ ー ト が 選択 され て いる 状態 で 、 
パレ ッ ト の メニ ュー か ら [新規 ステ ー ト ] を 選び ま [レイ ヤー] パレ ッ ト で 、[VWVORKS] レイ ヤー を 非 表 
示 に し 、[VVORKS-over] レイ ヤー を 表示 し ます 。 


す 。 
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^3 


(①) クリ ッ ク 


12|CNI 


13| 四 
(im 還 ERP 境 
ニニ ーー ニニ ニニ ニニ ーー ニー 


メニ ュー か ら 
断 規 ステ ー ト ] を 選択 


10 スラ イス 番号 13 の [GALLERY] を クリ ッ ク し て 選び 、 
パレ ッ ト の メニ ュー か ら [新規 ステ ー ト ] を 選び ま 
す 。 


(1) クリ ッ ク 


(2) メニ ュー か ら 
断 規 ステ ー ト ] を 選択 


12 スラ イス 番号 14 の [LINK] を クリ ッ ク し て 選び 、 パ 
レッ ト の メニ ュー か ら ! 断 規 ス テー ト ] を 選び ます 。 


STEP 4 HTML 書き 出し 


WORKS-aver 
クリ ッ ク し て 非 表 示 に 
クリ ッ ク し て 表示 GALLERY-oyer 


LINK-awer 


1 1 [Over] と いう ステ ー ト が 選択 され て いる 状態 で 、 
[レイ ヤー] パレ ッ ト で 、[GALLERY] レイ ヤー を 非 
表示 に し 、[GALLERY-overl レイ ヤー を 表示 し ます 。 


クリ ッ ク し て 非 表示 に 


クリ ッ ク し て 表示 


13 [Over] と いう ステ ー ト が 選択 され て いる 状態 で 、 
[レイ ヤー] パレ ッ ト で 、[LINK] レイ ヤー を 非 表示 
に し 、[LINK-over] レイ ヤー を 表示 し て くだ さい 。 


略 ロー ルオ ー バ ー の 種類 四 


ロー ルオ ー バ ー に は 、 マ ウス ポイ ンタ が 重なっ た と き (オー バー し た と き ) だ け で な く 、 マ ウス の ボタ ン を 押し た と き (Down)、 ク リッ ク し た 
と き (Click)、 マ ウス ポイ ンタ が ボタ ン か ら 離 れ た と き (Out)、 マ ウス の ボタ ン を 離し た と き (Up) の 5 つの 状態 に 対し て 、 そ れ ぞ れ 設 定 する 


こと が で きま す 。 こ れ ら を 総称 し て 「 ロ ー ル オー バー」 と いい ます 。 


ここ を クリ ッ ク し て 
変更 する 
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< ゅ 空白 スラ イス の 設定 
[ 画 候 なし]】 ス ライ ス に する 

何 も な い 部 分 (スラ イス の 番号 で 言う と 、1 番 、2 番 、4 番 、15 番 ) を 、「 画 像 な 
し 」 と いう 設定 に し ます 。 こ うし て お け ば 、 画像 と し て 扱わ れ な い の で デー タ サ イ 
ズ が 小さ く な り ま す 。 


mw ント !! 


透明 gif、 ビ ピク セル gif と も 呼ば れる [画像 な し ] 
ファ イル の 実体 は ? 


[画像 な し ] に 設定 する と 、 画 像 ファ イル を 書き 出し た と き に 
「spacer.gif] と いう 名 前 で 作成 され ます 。 こ の ファ イル は 1X1 ピ 
クセ ル の ファ イル な の で 、 デ ー タ サイ ズ は と て も 小さ いわ け で す 。 
実際 に は HTML 側 で 大 き さ や 位置 な ど を 指定 し て 全体 を 表示 させ 


て いま す 。 
陣 馬 』 1 ピク セル の 画像 


時 


SDaCET 


合 [画像 な し ] 設定 で 書き 出 合 フ ァイル を 開い た と ころ 。 
し た ファ イル 。 


1 [スラ イス 選択 ] ツー ル で 、 画面 の 一 番 上 の 01 番 スラ 2 [スラ イス ] タブ を クリ ッ ク し て [スラ イス ] パレ ッ 
イス を 選び ます 。 ト に 切り 替え 、[ 種 類 ] を [画像 な し ] に 設定 し ます 。 
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TEP < 叶 


MOMAUNIMAAARAAAMGA 


クリ ッ ク 


| 3 問 02 番 の 空 折 スラ イス を クリ ッ ク し て 、[ ス ライ 
ス ] パレ ッ ト で [種類 ] を [画像 な し ] に し ます 。 


司 様 の 手順 で 04 番 の 空力 スラ イス も [画像 な し ] の 
設定 を 行い ます 。 


裕 コ ピー ライ トド 
コピ ー ラ イト (copyright) は 著作 権 の こと で す 。 「 こ の 私 (この 会 社 ) 
に 、 許可 な く 使 うな ] と いう 意味 で 明記 し ます 。 フ ォ ン ト の 有無 に か 
か わら ず 、 どの マシ ン で も 表示 され る よう に 、 記号 は 使わ ず [copyright 

また は 「(C)」 と 入力 し て お く と よい で し ょ う 。 


ブラ ウザ で 確認 し た と き に 表示 され る 文字 


1* スラ イス \ 


15 番 の 空白 スラ イス を クリ ッ ク し て 、 選 択 状 態 に し [スラ イス ] パレ ッ ト で [種類 ] を [画像 な し ] に し 、 


ます 。 [テキ スト ] に コピ ー ラ イト を 入力 し ます 。[ セ ル 内 テ 
キス ト の 行 揃え ] は [ 模 ] を [中央] に 、[ 縦 ] を 【[ 下 ] に 
し て くだ さい 。 
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rs JPEG (ジェ ー ペ グ ) 


Joint Photographic Experts 
Group の 略 。 


Graphics Interchange Format 
の 略 。 


| pNe (ビック) | 


Portable Network Gra- 
phics の 略 で す 。 Photoshop 


と ImageReady で は 、PNG- 
8/24 形 式 も サポ ー ト され て 
いま す が 、PNG は まだ 一 
般 的 で は な く 、 ブ ラウ ザ に 
よっ て は 表示 され な いこ と も あ 
り ま す 。 


クリ ウツ クジ 


@ ゅ 最 化 保存 一 一 web 画像 を 作る 

Web 用 画像 で 最も 広く 使わ れ て いる ファ イル 形式 は JPEG と GIF で す 。 JPEG は 
写真 の よう な 連続 階 調 の ある 画像 に 適し て いま す 。 GIF は 文字 や イラ スト の よう に 
単色 の エリ ア が 大 きく 、 輪 郭 が シャ ー プ な 画像 に 適し て いま す 。 今回 作っ た サン 
プル 画像 に は GIF が 適し て いる の で 、 こ こ で は GIF 画像 の 最適 化 を 行い ます 。 


1 割 さ れ ま す 。 


[2 アッ プ ] タブ を クリ ッ ク し ます 。 ウ ィ ン ド ウ が 2 分 2 


NEW AA 


岡本 導 


ツー ル ボ ックス か ら [手のひら ] ツー ル を 選び 、 蝶 全 
体 が 見 える よう に 表示 位置 を 調整 し ます 。 
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3 


ツー ル ボ ッ ク 


ス か ら 「[ ス ライ ス 選 択 ] ツー ル を 選び 、 


右側 の 分 割 画面 の 蝶 を クリ ッ ク し ます 。 


9 


選び ます 。 


次 に 、 右 側 の 分 割 画面 で 、06 番 の [円 ] スラ イス を 


STFP 4 hmL 寺 きじ 


履 色 数 の 適正 値 は ? 目 


いろ いろ 試し て 、 見 た 目 に お か し く な い 色 数 に し ます 。 デー タ の 
サイ ズ を 抑え る の が 最大 の 目的 な ら 、 も ちろ ん 劣化 は し ます が 、 色 
数 を 少な くす る と デー タ サ イズ が 小さ く な り ま す 。 


全 [カラ ー] で 色 数 を 4 に 設定 する と 、[ カ 
ラー テー ブル ] で 黒 、 青 、 白 、 透 明 の 4 色 
で 描か れ て いる こと が わか り ま す 。 


4 [ 野 適 化 】 パレ ッ ト で 、 左上 か ら [GIF]、[Lossy : 0]、 
[知覚 的 ]、[ カ ラー : 16]、[ デ ィ ザ な し ] に 設定 し ま 
す 。 自動 的 に 画像 が 変換 され 、 変 換 後 の 状態 が 表示 され ま 


す 。 


ぎざぎざ の こと 。 ジ ャ ギー を 目立た な くす る た め に 、 輪郭 を 多少 ぼ か 
すこ と を 「 ア ンチ エイ リア ス 」 と いい ます 。 ア ンチ エイ リア ス で は 輪 
郭 が 背景 に な じ む よう に だ ん だ ん 透明 に な る た め 、 見 た 目 は 単純 な 黒 
い 線 で も 、 数 色 が 使わ れ て いま す 。 


[最適 化 】 パ レッ ト で [知覚 的 ]、[ カ ラー : 8] に 設 

定 し ます 。 こ の 場合 、 輪 郭 に 多少 ジャ ギー が 見 えま 
す が 【[ カ ラー : 4] で も か まい ませ ん 。[ カ ラー : 2] に す 
る と 、 白 黒色 だ け な の で ジャ ギー が 目立ち ます 。 


[日 曜日 ] 一 週間 で マス ター する 237 


< ミ 


SS 03 番 の [NEW AGE] の ス 
ライ ス を 選び 、[ 貞 適 化 】 パレ ッ ト で [カラ ー : 4] に 


設定 し ます 。 


mr ビン ト !! 


導 背景 を 透明 に し た い 」 


GIF 画像 で は 、GIF89a と いう 、 画像 の 一 部 を 透明 色 と し て 指定 で 
きる 形式 が あり ます 。 こ れ を 使う 場合 は 、[WEB 用 に 保存 ] で は 
な く 、Photoshop の [イメ ー ジ ] メニ ュー [モー ド ] 一 [イン 
デック スカ ラー] で イン デック スカ ラー に 変換 し 、[ フ ァイル ] メ 
ニュ ーー [デー タ 書 き 出 し ] 一 [GIF89a 書 き 出し ] を 選ん で 
「GIF89a 書 き 出し | を 行い ます 。 


グ り ウッ ク 


全 [GIF89a 書 き 出し ブ プレビュー] ダイ アロ グ ボ ックス で 、 透 明 に 
し た い 色 を クリ ッ ク し ます 。 最後 に [DK] を クリ ッ ク し ます 。 


| ImageReady で ホー ムペ ー ジ を 作ろ う 旨 


同じ く 右 側 の 分 割 画面 で 、11 番 の [INFORMATION] 
の スラ イス を 選び ます 。 [最適 化 】] パレ ッ ト で [カラ 
ーー : 16] に 設定 し ます 。 青 1 色 の よう に 見 えま す が 、 記 れ 
た 感じ を 出す た め に ぽか し て いま すか ら 、 同 系 色 の た くさ 
ん の 色 を 使っ て いる の で す 。12 一 14 番 の スラ イス も これ と 
同じ 設定 に し まし よう 。 


| イン タレ ー ス と プロ グレ ッ シ ブ | 


Web ペ ー ジ を 開い た と き に 、 画像 が な か な か 表示 され な く て 、 い 
らい らし た り 退 届 な 思い を し た こと は あり ませ ん か 。 そ うな ら な 
いた め に 、GIF に は 「 イ ンタ レー ス 」 が 、 そ し て JPEG に は 「 プ ロ 
グレ ッ シ ブ 」 と いう 仕組 み が 用 意 さ れ て いま す 。 フ ァイル を 保存 
する 際 に これ を 指定 し て お く と 、 Web ペ ー ジ で 表示 する 際 に 、 画 
像 デー タ を ダウ ン ロ ー ド し な が ら 少 し ずつ 画像 が 表示 され て いき 
ます 。 1KB 以 下 の ち ょ っ と し た 画像 な ら と も か く 、 メ イン ビジ ュ 
アル と な る 画像 は サイ ズ が 大 きか っ た り 、 き れい に 見 せる た め に 
色 数 が 多かっ た りす る た め 、 フ ァイル 容量 も 大 きく な り が ち で す 。 
Web ペ ー ジ を 見 る 人 へ の 配慮 を 忘れ な いよ うに する こと は 、 ホ ー 
ムペ ー ジ 制作 者 に と っ て 、 と て も 大 事 な こ と で す 。 ImageReady 
の ウィ ンド ウ の 左下 に 表示 され る 画像 の ファ イル サイ ズ や ダウ ン 
ロー ド 時 間 な ど を 、 常 に 意識 する よう に 心掛け て くだ さい 。 


238 一 週間 で マス ター する [日 曜日 ] 


@ ぁ TIMIL 書 きき 出し 
ロー ルオ ー バ ー や GIF アニ メー ショ ン の 動き が うま くい っ て いる か を 確認 する た 
め に 、 こ こ で 保存 し て 、 ブ ラウ ザ で 確認 し て み ま し ょ う 。 


チェ ッ ク を 入れ る 保存 する 場所 を 指定 "ファ イル 名 を 指定 


HOME-PAGE-01.html 


「 選択 U】 


[HTML を 保存 ] [画像 を 保存 ] に チェ ッ ク を し ます 。 
保存 先 と 保存 名 を 指定 し 、[ 保 存 ] ボタ ン を クリ ッ ク 
し ます 。 


1 [ファ イル ] メニ ュー 一 [最適 化 フ ァイル を 保存 ] 2 
(Alt 十 Ctrl キー 十 5) を 選択 し ます 。 


HTML フ ァイル 


アイ コン を 遂 択 
する と 、 そ の 
SI ま 


画像 ファ イル 


3 半 ISSNSSSIIMRNESMNSGSSSSW 


う 大 Internet Explorer、Netscape Navigator な どの ブラ 
HTML で 書き 出さ れ た ファ イル ( 右 ) と 、「images」 ウザ ソフ ト を 起動 し ます 。 
フォ ル ダ に 収め られ た 画像 ファ イル ( 左 ) が 作成 され て い 


る の が わか り ま す 。 


[日 曜日 ] 一 週間 で マス ター する 239 


sa 同和 ーー ーー 吉 還 L 


| ImageReady で ホー ムペ ー ジ を 作ろ う | 


ブラ ウザ を 起動 し な いで 、 フ ァイル を ダブ ルク リッ ク し て も か ま 


いま せん 。 


imiages 


rwroWw 村 TON 


に まま も も まう 
1 ゴ す きき ミミ も 4』 


すき 1 1 


(C) Yukari Yoshioka / NEW AGE Co,Ltd 


所 | 
5 デス クト ッ プ 画面 で 、HTML フ ァイル を ブラ ウザ の ウ HTML フ ァイル が ブラ ウザ の ウィ ンド ウ に 現れ ます 。 
ィ ン ド ウ に ドラ ッ グ & ドロ ッ プ し ます 。 た めし に [INFORMATION] に マウ スポ イン タ を 合 


ここ が ポイ ント 
デー タ サ イズ の 確認 

常に デー タ サ イズ を 確認 し な が ら 作 業 を 
すす め る よう に し まし ょ う 。 最終 的 な デ 
ー タ サイ ズ は 、[ 最 適 化 ] パレ ッ ト の 設 
定 で 、 最適 化 さ れ た 画像 の 情報 (デー タ 
サイ ズ な ど ) は ウィ ンド ウ 左 下 ス テー タ 
スバ パー で 確認 する こと が で きま す 。 書き 
出し た ファ イル は 、 フ ァイル の アイ コン 
を 右 ク リッ ク し て 、 シ ョ ー ト カッ トメ ニ 
ュー の [プロパ ティ ] で 確認 する こと も 
で きま す 。 ひと つ ひ と つの ファ イル サイ 
ズ だ け で な く 、 フ ォ ル タダ 全体 の ファ イル 
サイ ズ も 確認 する よう に し て くだ さい 。 


わせ て くだ さい 。 ロ ー ル オー バー の 設定 が うま くい っ て い 
れ ば 、 画 像 が 切り 替わる は ず で す 。 


F_NEW AGE | 


| マ を クリ ッ ク 
する と 、 表示 
中 され る 情報 を 
切り 替え る こ 
8 | と が で きま す 。 


ーー 
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| STEP 4 HTML 寺 出し pm 


ーー ーー 義 


自分 の 作品 を Web に 公開 し よう ! | 


あま り に 簡単 に 、 な ん で も か ん で も ギャ ラリ ー に し た く な っ て し まう よう な 機能 が 、Photoshop の [自動 処理 ] の 新 機能 [Web フォ ト ギ ャ ラ 
リー] で す 。 面倒 な HTML を 書か ず に 、 あ っ と いう 間 に ギ ャ ラリ ー を 作っ て くれ ます 。[ 自 動 処理 ] に は 、 実行 元 と 保存 先 の フォ ル ダ を 指定 す 
る だ け で 、 フ ォ ル ダ 内 の 画像 を 一 括 処理 し て くれ る 便利 な 機能 が 用 意 さ れ て いま す 。 そ の 他 [コン タク トシ ー ト ] (画像 一 覧 リス ト 作成 ) も 、 


画像 の リス ト 作り に 重宝 する SA 1 
al 和 矢印 を クリ ッ ク し て 、 次 (また は 前 ) の 作品 を 順番 に みる こと が で きる 


jobe Photoshop5.5 Web フォ ト ギャ ラリ ー 
nm 


ダイ アロ グ が 現れ た ら 、 共 の 入っ で いる フォ ル ダ ど 株 6 の フォ ル ダ 提 害し て Io 
ボタ ン を クリ ッ ク 。 少し 待っ て いる と 、 ブ ラウ ザ が 起動 し て 素材 の 一 覧 が 作成 され ます 。 


7 思 紅 
[Web フォ ト ギ ャ ラリ ー] を 選択 し ます 。 


アア だ 7 境 ファ イル サイ ズ に こだわ る 
@ ウ ィ ン ド ウ に 表示 され る ファ イル サイ ズ 劉 HOME-PAGE-01 . 1KB 


保存 し た ファ イル を ウィ ンド ウ で 確認 する と 、 プ ロ パ ティ の サイ ズ と 異な っ て いる こと が わか り ま す 。 ウ 
ィ ン ド ウ の サイ ズ は 、 そ の デー タ が 保存 され て いる ディ スク ボリ ュー ム の 占有 スペ ー ス の 大 き さ で す 。 ボリ 
ュー ム の サイ ズ に よっ て 占有 スペ ー ス の 最小 単位 は 異な り ま すか ら 、 同 じ デ ー タ 量 の ファ イル で も 、 そ れ を 
数 GB の ハー ド デ ィ スク に 保存 し た と き と 、 フ ロッ ピー ディ スク に 保存 し た と き で は 、 こ の 数 字 は 変わ っ て 
きま す 。 
ファ イル の 圧縮 方 法 に つい て 

JPEG 形 式 は 、 圧 縮 率 を 高く する と 数 十 KB の 写真 も 数 KB に な っ た り し ます が 、 画 質 も それ だ け 劣 化し て し 
まい ます 。 文字 な どの 輪郭 が 大 切な 画像 に は 適し ませ ん 。 ジ ャ ギー っ ぽく な る 場合 も わる の で 、Photoshop、 
ImageReady の 最適 化 パ レッ ト に は [ぼかし] オプション が 用 意 さ ご れ て いま す 。 ま た 、JPEG 形 式 は 保存 する 
た びに どん どん 画質 が 劣化 する の で 、 注 意 が 必要 で す 。 

GrF 形 式 は 、 画 像 に 使わ れ て いる 色 数 を 少な くす る こと で 、 デ ー タ サイ ズ を 圧縮 し て くれ ます 。 さ ら に 、 
Photoshop、ImageReady で は 、JPEG の よう に 画質 の 劣化 する GIF 圧縮 や サポ ー ト し て いま す 。 こ れ が 最適 化 
パレ ッ ト に ある [Lossy] で す 。 デ ー タ の 一 部 を 捨て て し まう 圧縮 な の で 、 画 質 が 劣化 し ます が 、 デ ー タ サ 
イズ を さら に 小さ くす る こと が で きま す 。 通常 、 数 % 程 度 の 圧縮 率 な ら 画 質 が 目立っ て 劣化 する こと は あり 
ませ ん 。 た だ し 、 イ ンタ レー ス を 指定 する と Lossy 圧 縮 は 使え な く な っ て し まい ます 。 
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| ImageReady で ホー ムペ ー ジ を 作ろ う | 


MM 


1 WEEK MASTER 


WWday 


WWPWW7 人 WWW799 和 99MWWOY 人 RS 人 9 人 


ClHF ア ニメーション を 
作る 


> ア ニメーション の 設定 
ホー ムペ ー ジ 上 で 動く アニ メー ショ ン は 、 人 目 を 引き 付け る 効果 大 で す 。 さ あ 、 
蝶 が 羽 を 動か し て いる アニ メー ショ ン を 作っ て 、 ホ ー ム ペー ジ を 仕上 げ ま し ょ う ! 


| [アニ メー ショ ン ] パレ ッ ト が 出 て いな いと き は 四 


[アニ メー ショ ン ] パレ ッ ト は 、[ ス ライ ス ] [ロー ルオ ー バ ー] パ 


レッ ト と グル ー プ に な っ て いま す 。 も し 画面 に 表示 され て いな い 


と き は 、[ ビ ュー] メニ ュー [アニ メー ショ ン を 表示 ] を 選ん で 


くだ さい 。 


1 [スラ イス 選択 ] ツー ル で 8 番 の 蝶 の スラ イス を クリ ッ 2 [アニ メー ショ ン ] タブ を クリ ッ ク し て 、 パ レッ ト を 


ク し ます 。 


切り 替え ます 。 


3 [アニ メー ショ ン ] パレ ッ ト の メニ ュー か ら 断 規 フレ ー ム ] を 生還 dy フレ ー 


選び ます 。 


ム を 作成 し た 時 点 の 絵柄 が 適用 され ます の 
で 、 現在 は フレ ー ム 1 と 2 は 同じ 絵柄 で す 。 
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日 曜 


日] 


STEP 5 GIF アニ メー ショ ン を 作る 


] ポ 語 


| NEW AGE 


クリ ッ ク し て 表示 
クリ ッ ク し て 非 表示 
5 [アニ メー ショ ン ] パレ ッ ト の [フレ ー ム 2] が 選択 さ 画面 に 表示 され て いる 絵柄 が 変わ り 、 同時 に フレ ー 
れ て いる 状態 で 、[ レ イヤ ー] パレ ッ ト の [anim-003] ム 2 の 絵柄 も [anim-003] に 変わ り ま す 。 
を 表示 し 、[anim-004] を 非 表 示 に し ます 。 目 の アイ コン 
を クリ ッ ク し て くだ さい 。 


sisi 


: { 3 り 彰 じ て い 


の 同様 の 手順 で 、 新 し い フ レー ム を 作成 し て 、 フ レー 今度 は 羽 を 広げ て いく 動き を 作成 し まし ょ う 。 フ レ 


ム 3 に 対し て は [anim-002] レイ ヤー を 表示 し 、 フ ー ム 3 を 選択 し て 、Alt キ ー 十 ドラ ッ グ で フレ ー ム 4 の 
レー ム 4 に 対し て は [anim-001] レイ ヤー を 表示 し ます 。 右側 に 複製 し ます 。 フ レー ム 3 を フレ ー ム 5 に 複製 する わけ 
フレ ー ム 1 一 4 で 、 蝶 の 羽 が 閉じ て いく 様子 を 表し ます 。 で す 。 


(キー ドラック ) 


| ーーー-ー イイ 
胃 . 押 較 


次 に 、 フ レー ム 2 を 選択 し て 、Alt キ ー+ ドラ ッ グ で 10 フレ ー ム 6 の 次 は フレ ー ム 1 に 戻る よう に し ます 。 フ 
フレ ー ム 6 と し て 複製 し ます 。 フ レー ム 1 か ら 4 ま で 羽 レー ム 1 の 下 の 「0 秘 」 と 書い て ある と ころ を プレ ス 
が 閉じ 、 フ レー ム 5 と 6 で 羽 が 広がり ます 。 する と 時 間 設定 が で きま す 。 こ こ で は [1.0] 秒 に し て お 
きま す 。 
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| ImageReady で ホー ムペ ー ジ を 作ろ う | 
[アニ メー ショ ン の 停止 ] ボタ ン [アニ メー ショ ン の 再生 ] ボタ ン 


rwI ニ ント !! 


| レイ ヤー バレ ッ ト で 動き の 確認 。 | 


[レイ ヤー] パレ ッ ト の 下 に ある [アニ メー ショ ン か ら 次 の フレ ー 
SR ム を 選択 ] ボタ ン を クリ ッ ク し て も 、 ア ニメーション の 変化 を 確 
ビー メー ショ ン の 再生 ] ポタ ン を クリ ッ ク し て 、 動 認 す る こと が で きま す 。 

き を 確認 し て み ま し ょ う 。 蝶 の 羽 が 閉じ た り 開 いた り 
する アニ メー ショ ン に な っ て いる は ず で す 。 う まく 動い て 
いま すか ? 再生 を 終わ ら せ る と き は 、[ ア ニメーション 
の 停止 ] ボタ ン を クリ ッ ク し ます 。 


アニ メー ショ ン か ら 次 の フレ ー ム を 選択 
アニ メー ショ ン か ら 前 の フレ ー ム を 選択 


ビデ E 記 用 も う ひ と つの アニ メー ショ ン 作 成 法 
@ [トゥ イー ン ] を 使っ て 自動 フレ ー ム 作成 

ここ で は 、 ア ニメーション に 使用 する 画像 を Photoshop で 用 意 し て お きま し た が 、ImageReady の アニ メー 
ショ ン 機 能 に は 、 自 動 的 に 中 間 の 動き を 表現 する フレ ー ム を 作成 し て くれ る コマ ンド が 用 意 さ れ て いま す 。 


ecoCKGeasssss 新しく 作成 され た フレ ー ム 


[アニ メー ショ ン ] パレ ッ ト で フレ ー ム 1 を 選択 し 、 生 フレ ー ム 1 と フレ ー ム 2 の 間 に 新 し く 2 つ の フレ ー ム 


パレ ッ ト の メニ ュー の [トゥ イー ン ] を 選び ます 。 が 作成 され ます 。[ 不 居 明 度 ] に チェ ッ ク を 入れ て 
ダイ アロ グ ボ ックス で 、[ ト ゥ イー ン ] を [次 の フレ ー いた の で 、 ぶ ぷれ だ た よう な 画像 が 作成 され 、 動 いて いる よ 
ム ]、[ 追 加 す る フレ ー ム ] を 「[2] に し て 、[OK] ボタ うな 効果 も 付き まし た 。 

ン を クリ ッ ク し ます 。 
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@ ぁ アニ メー ショ ン 設 定 後 の フ ァイル を 保存 
変更 し た 部 分 だ け を 書き 出し まし ょ う 。 基 本 的 な HTML フ ァイル は 変更 せ ず に 、 | "ACNeady で 作っ た ー 


アニ メー ショ ン 設 定 し た 蝶 の 画像 だ ! し ます 。 る に は 、HTML 言 語 を ある 
ョ ン 設 定 し た 蝶 の 画像 だ け を 書き 出し ます 程度 理 狂 し て おく と 便利 で 


す 。 詳し く は 「 一 週間 で マ 
スタ ー す る ホー ムペ ー ジ の 
作り 方 」 な どの 専門 書 を 参 
考 に し て くだ さい 。 


クリ ッ ク 


1mages 
を ] HOME-PAGE-01.html 


まま も すす すす] 


ーーー ーー IHOME-PAGE-01 html [ 


間隔 


[スラ イス 選択 ] ツー ル で 、 蝶 の スラ イス を 2 [ファ イル ] メニ ュー 一 [最適 化 フ ァイル を 別名 で 保存 ] 

(Ctrl 填 Shift 二 Alt キー 十 5) を 選び ます 。 ア ニメーション に し 
た 画像 だ け を 書き 換え た い の で 、[HTML を 保存 ] の チェ ッ ク は 外 
し 、[ 画 像 を 保存 ] と [選択 し た スラ イス の み 保 存 ] の 2 つ に チェ ッ 
ク を 入れ ます 。 保存 先 に 、 さきほど [最適 化 フ ァイル を 保存 ] で 書 
寺 き 出 し た フォ ル ダ を 指定 し 、 名 前 は 変え ず に [保存] ボタ ン を クリ 
ッ ク し ます 。 


に まま まそ コ 


すき 3 さる も 


911 1 


1 クリ ッ ク し て 選び ます 。 


NEW AGE 


4 更新 し た HTML フ ァ 

イル を ブラ ウザ に ド 
ラッ グ す る な ど し て 、 確 
認 し て み ま し ょ う 。 ア ニ 
メー ショ ン が 動き 、 す べ 
て の 項目 が マウ ス を 重ね 
た と き に 反応 すれ ば OK で 
す 。 


う アニ メー ショ ン に する 前 に 書き 出し た 蝶 の 画 
像 を GIF アニ メー ショ ン フ ァイル に 置き 換え 
る か 聞い て きま す の で 、[ は い ] を クリ ッ ク し て 置 
寺 き 換 えて くだ さい 。 
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